import React, { useEffect } from 'react';
import { Modal, Form, Input, Select, Button, Popconfirm, Space } from 'antd';
import { ExtensionInfo } from '@/common/types';
import { SvgIcon } from '@/components/icon';

interface AppDetailModalProps {
  visible: boolean;
  onCancel: () => void;
  onDelete: (id: string) => void;
  onEdit: (values: ExtensionInfo) => void;
  currentApp: ExtensionInfo | null;
  categoryList: { label: string; value: string }[];
  systemList: { label: string; value: string }[];
  handleCategorySearch: (value: string) => void;
  handleSystemSearch: (value: string) => void;
  dropdownCategoryStyle: React.CSSProperties;
  dropdownSystemStyle: React.CSSProperties;
}

const AppDetailModal: React.FC<AppDetailModalProps> = ({
  visible,
  onCancel,
  onDelete,
  onEdit,
  currentApp,
  categoryList,
  systemList,
  handleCategorySearch,
  handleSystemSearch,
  dropdownCategoryStyle,
  dropdownSystemStyle,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (currentApp) {
      form.setFieldsValue(currentApp);
    }
  }, [currentApp, form]);

  return (
    <Modal title="业务详情" open={visible} onCancel={onCancel} footer={null} key={currentApp?.id}>
      {currentApp && (
        <Form
          key={currentApp?.id}
          form={form}
          initialValues={currentApp}
          onFinish={onEdit}
          layout="vertical"
        >
          <Form.Item
            name="name"
            label="业务名称"
            rules={[{ required: true, message: '请输入业务名称' }]}
          >
            <Input className="!rounded-button" />
          </Form.Item>
          <Form.Item
            name="name"
            label="业务网址（必须填写其中一项）"
            rules={[{ required: true, message: '请输入业务网址' }]}
          >
            <Form.Item
              name="web_url"
              style={{ marginTop: '16px' }}
              label={
                <div className="flex items-center gap-2">
                  <SvgIcon icon="mingcute--airplay-line" size={20}></SvgIcon> 添加PC端
                </div>
              }
            // rules={[{ required: true, message: '请输入业务网址' }]}
            >
              <Input className="!rounded-button" />
            </Form.Item>
            <Form.Item
              name="app_url"
              style={{ marginBottom: '0px' }}
              label={
                <span className="inset-6 flex items-center gap-2">
                  <SvgIcon icon="mingcute--cellphone-2-line" size={20}></SvgIcon>{' '}
                  <span>添加移动端</span>
                </span>
              }
            // rules={[{ required: true, message: '请输入业务网址' }]}
            >
              <Input className="!rounded-button" />
            </Form.Item>
          </Form.Item>
          <Form.Item
            name="category"
            label="所属部门"
            rules={[{ required: true, message: '请选择或输入部门' }]}
          >
            <Select
              className="!rounded-button"
              showSearch
              allowClear
              options={categoryList}
              placeholder="请选择部门"
              onChange={(value) => {
                value && form.setFieldValue('category', value);
              }}
              onBlur={(e) => {
                e.target?.value && form.setFieldValue('category', e.target?.value);
              }}
              onSearch={handleCategorySearch}
              dropdownStyle={dropdownCategoryStyle}
            />
          </Form.Item>
          <Form.Item
            name="system"
            label="所属系统"
            rules={[{ required: true, message: '请选择或输入系统' }]}
          >
            <Select
              className="!rounded-button"
              showSearch
              allowClear
              placeholder="请选择系统"
              options={systemList}
              onChange={(value) => {
                value && form.setFieldValue('system', value);
              }}
              onBlur={(e) => {
                e.target?.value && form.setFieldValue('system', e.target?.value);
              }}
              onSearch={handleSystemSearch}
              dropdownStyle={dropdownSystemStyle}
            />
          </Form.Item>
          <Form.Item
            name="description"
            label="业务介绍"
            rules={[{ required: true, message: '请输入业务介绍' }]}
          >
            <Input.TextArea rows={4} className="!rounded-button" />
          </Form.Item>
          <Form.Item className="mb-0 text-right">
            <Space>
              <Popconfirm
                title="确定要删除该业务吗？"
                onConfirm={() => onDelete(currentApp.id)}
                okText="确定"
                cancelText="取消"
              >
                <Button danger className="!rounded-button">
                  删除
                </Button>
              </Popconfirm>
              <Button type="primary" htmlType="submit" className="!rounded-button">
                修改
              </Button>
            </Space>
          </Form.Item>
        </Form>
      )}
    </Modal>
  );
};

export default AppDetailModal;
